@charset"utf-8";
$fs:64px;
@function r($px) {
    @return $px/$fs*1rem
}

.Login {
    position: relative;
    width: r(640px);
    height: 100%;
    box-sizing: border-box;
    background-color: #222222;
    padding-top: r(194px);
    .close {
        position: absolute;
        top: 0;
        left: 0;
        float: left;
        display: inline-block;
        background-color: red;
        width: r(50px);
        height: r(50px);
        border-radius: 50%;
        margin: r(20px) 0 0 r(14px);
        img {
            display: block;
            width: r(22px);
            height: r(22px);
            margin: 0 auto;
            margin-top: r(13px);
        }
    }
    .logo {
        img {
            width: r(161px);
            height: r(136px);
            display: block;
            margin: 0 auto;
        }
    }
    ul {
        display: block;
        margin-top: r(47px);
        li {
            width: r(492px);
            margin: 0 auto;
        }
        .usr_name {
            span {
                float: left;
                display: inline-block;
                width: r(61px);
                height: r(53px);
                background-color: #303030;
                img {
                    display: block;
                    width: r(29px);
                    height: r(30px);
                    margin: r(6px) auto;
                }
            }
            input {
                float: left;
                color: #cdcdcd;
                width: r(392px);
                height: r(53px);
                border: 0;
                background-color: #3d3d3d;
                outline: 0;
                padding-left: r(39px);
                font-size: r(20px);
            }
        }
        .pswd {
            margin-top: r(16px);
            span {
                float: left;
                display: inline-block;
                width: r(61px);
                height: r(53px);
                background-color: #303030;
                img {
                    display: block;
                    width: r(29px);
                    height: r(30px);
                    margin: r(6px) auto;
                }
            }
            input {
                float: left;
                color: #cdcdcd;
                width: r(392px);
                height: r(53px);
                border: 0;
                background-color: #3d3d3d;
                outline: 0;
                padding-left: r(39px);
                font-size: r(20px);
            }
        }
        .help_wjmm {
            margin-top: r(26px);
            font-size: 0;
            text-align: right;
            margin-bottom: r(59px);
            span:first-child {
                width: r(19px);
                height: r(19px);
                img {
                    width: r(19px);
                    height: r(19px);
                }
            }
            span:last-child {
                color: white;
                font-size: r(19.53px);
                margin-left: r(6px);
            }
        }
        .DL {
            font-size: 0;
            background-color: red;
            height: r(53px);
            input {
                background-color: red;
                color: #cdcdcd;
                font-size: r(23.8px);
                width: 100%;
                height: 100%;
                border: 0;
                outline: 0;
            }
        }
        .ZC {
            margin-top: r(14px);
            font-size: 0;
            background-color: red;
            height: r(53px);
            input {
                background-color: #303030;
                color: #cdcdcd;
                font-size: r(23.8px);
                width: 100%;
                height: 100%;
                border: 0;
                outline: 0;
            }
        }
    }
}